<template>
  <div class="shopcart">
    <div class="shopcart-left">
      <span class="shopcart-left-price">{{ price.toFixed(2) }}</span>
    </div>
    <div @click="toAccount" class="shopcart-right" :class="{ disabled: price <= 0 }">去结算</div>
  </div>
</template>


<script lang="ts" setup>
import { computed } from "vue";
import type { ICoffeeType } from "../../index.vue";
import { useRouter } from "vue-router";
import useGlobalStore from "@/store/useGlobalStore"

const router = useRouter();
const globalStore = useGlobalStore();

const props = withDefaults(defineProps<{
  coffee: ICoffeeType["children"];
}>(), {
  coffee: () => []
})
const price = computed<number>(() => {
  let money = 0;
  props.coffee.forEach(item => {
    if (item.checked) money += item.price || 0;
  })
  return money;
})

const toAccount = ()=>{
  if(price.value<=0) return;
  globalStore.setKeepAliveHome(true);
  router.push({
    path: "/account",
    query: {coffeeOptions: JSON.stringify(props.coffee)}
  })
}
</script>


<style lang="less" scoped>
@import "./index.less";
</style>